<template>
	<view class="container">
		<view id="header">
	    <view class="list-header bg-white">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
	        <view class="solid-bottom">
	            <view class="cu-bar search">
	                <view class="search-form round">
	                    <text class="cuIcon-search"></text>
	                    <input type="text" placeholder="搜索订单号" v-model="keyword"></input>
	                </view>
	                <view class="action">
	                    <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
	                </view>
	            </view>
	        </view>
	    </view>
		<view class="cu-bar bg-white">
			<view class="action">查询范围：
				<picker mode="date" fields="year" :start="startYear" :end="endYear" @change="bindYearChange">
					<text class="cu-tag bg-grey radius">{{year}}</text>
				</picker>
			</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		</view>
		<view class="list-body">
			<scroll-view scroll-y @scrolltolower="scrollTolower" style="height:78vh;">
				<view class="cu-card article" v-for="(item,index) in listData" :key="index">
					<view class="cu-item padding-top-xs">
						<view @click="toOrderInfo(item)">
							<view class="title">
								<view class="text-cut text-orange">{{item.tradeNo}}</view>
							</view>
							<view class="content">
								<view class="text-cut">
									<view><text class="tt">订单标题：</text>{{item.title}}</view>
									<view><text class="tt">会员名称：</text>{{item.memberName}}</view>
									<view><text class="tt">设备序列号：</text>{{item.deviceSn}}</view>
									<view><text class="tt">收费方式：</text>{{item.costModeName}}</view>
									<view><text class="tt">订单金额：</text><text class="text-red">{{item.moneyStr}}元</text></view>
									<view><text class="tt">租借网点：</text>{{item.placeName}}</view>
									<view><text class="tt">租借地区：</text>{{item.areaName}}</view>
									<view><text class="tt">租借时间：</text>{{item.createDate}}</view>
									<view><text class="tt">订单状态：</text>
										<text v-if="item.state == 1" class="cu-tag bg-green sm round">{{item.stateName}}</text>
										<text v-if="item.state == 2">{{item.stateName}}</text>
										<text v-if="item.state == 4" class="cu-tag bg-red sm round">{{item.stateName}}</text>
									</view>
								</view>
							</view>
							<button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				tabListData:['全部','租借中','已完成','已撤销'],
				
				year:'2024',
				startYear:'2023',
				endYear:'2024',
				listData:[],
				keyword:'',
				pageNo:1
			};
		},
		onLoad(option) {
			let date = new Date();
			this.year = date.getFullYear().toString();
			this.endYear = this.year;
			
			this._loadListData();
		},
		methods:{
			_loadListData:function(){
				if(this.pageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					let state = this.tabIndex;
					if(state == 3){
						state = 4;
					}else if(state == 0){
						state = null;
					}
					api.post(api.url.orderList,{
						year:this.year,
						trim:this.keyword,
						pageNo:this.pageNo,
						state:state
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			btnSearch:function(){
				this.pageNo=1;
				this.tabIndex = 0;
				this.listData=[];
				this._loadListData();
			},
			bindYearChange:function(e){
				console.log(e);
				this.year = e.detail.value;
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			toOrderInfo:function(item){
				if(item.businessType == 'CDB'){
					uni.navigateTo({
						url:'./cdb/detail?tradeNo='+item.tradeNo+'&createDate='+item.createDate
					});
				}else if(item.businessType == 'CDCZ'){
					uni.navigateTo({
						url:'./cdcz/detail?tradeNo='+item.tradeNo+'&createDate='+item.createDate
					});
				}else if(item.businessType == 'BXSCN'){
					uni.navigateTo({
						url:'./bxscn/info?tradeNo='+item.tradeNo+'&createDate='+item.createDate
					});
				}else if(item.businessType == 'BXSCNShop'){
					uni.navigateTo({
						url:'./bxscn_shop/info?tradeNo='+item.tradeNo+'&createDate='+item.createDate
					});
				}else if(item.businessType == 'PCL'){
					uni.navigateTo({
						url:'./pcl/info?tradeNo='+item.tradeNo+'&createDate='+item.createDate
					});
				}else{
					uni.showModal({
						title:'温馨提示',
						content:'暂时无法查看订单信息',
						showCancel:false
					})
				}
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-body .cu-card>.cu-item .title{line-height:60rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content .tt{min-width:130rpx;display:inline-block;text-align:left;}
</style>
